<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>恒达科技|产品中心</title>
</head>
<body>
{% include 'navbar.html' %}

<div class="container">
    <div class="model-list col-md-3">
        <ul class="list-group">
            <li class="list-group-item" id="robot">
                <a href="{% url 'productsApp:products' 'robot' %}">家用机器人</a>
            </li>
            <li class="list-group-item" id="monitor">
                <a href="{% url 'productsApp:products' 'monitor' %}">智能监控</a>
            </li>
            <li class="list-group-item" id="face">
                <a href="{% url 'productsApp:products' 'face' %}">
                    人脸识别解决方案</a>
            </li>
        </ul>
    </div>
    <!-- 说明文字和图片 -->
    <div class="col-md-9">
        <div class="model-details-title">
            {{ productName }}
        </div>
        <!-- 此处填入产品列表内容 -->
        {% for product in productList %}
            <div class="row">
                <div class="col-md-6">
                    {% for img in product.productImgs.all %}
                        {% if forloop.first %}
                            <a href="#" class="thumbnail row-4">
                                {% with base64_image=img.get_file_base64 %}
                                    <img class="img-responsive" src="data:image/jpeg;base64,{{ base64_image }}"
                                         alt="Award Photo">
                                {% endwith %}
                            </a>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="col-md-6">
                    <h3>{{ product.title|truncatechars:"20" }}</h3>
                    <p>{{ product.description|truncatechars:"150"|linebreaks }}</p>
                    <div class="thumbnail row-5">
                        <div class="caption">
                            <a href="{% url 'productsApp:productDetail' product.id %}" class="btn btn-primary"
                               role="button">
                                查看详情
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
        {% if pageData %}
            <div class="paging">
                <ul id="pages" class="pagination pagination-sm pagination-xs">
                    {% if pageData.first %}
                        <li><a href="?page=1">1</a></li>
                    {% endif %}
                    {% if pageData.left %}
                        {% if pageData.left_has_more %}
                            <li><span>...</span></li>
                        {% endif %}
                        {% for i in pageData.left %}
                            <li><a href="?page={{ i }}">{{ i }}</a></li>
                        {% endfor %}
                    {% endif %}
                    <li class="active"><a href="?page={{ pageData.page }}">{{ pageData.page }}</a></li>
                    {% if pageData.right %}
                        {% for i in pageData.right %}
                            <li><a href="?page={{ i }}">{{ i }}</a></li>
                        {% endfor %}
                        {% if pageData.right_has_more %}
                            <li><span>...</span></li>
                        {% endif %}
                    {% endif %}
                    {% if pageData.last %}
                        <li><a href="?page={{ pageData.total_pages }}">{{ pageData.total_pages }}</a></li>
                    {% endif %}
                </ul>
            </div>
        {% endif %}
    </div>
</div>

{% include 'footer.html' %}
</body>
</html>